<!-- 文档类型声明标签，告知浏览器这个页面采取html版本来显示页面 -->
<!DOCTYPE html>
<!-- 告诉浏览器这是一个英文网站，本页面采取英文显示，单也可以书写中文 -->
<html lang="en">

<head>
    <!-- 必须书写，告知浏览器以UTF-8编码表编解码中文，如果不书写就会乱码 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 标题标签 -->
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>

<body>

    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">

            <table>

                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <!--                    <input name="username" type="text" id="username" onblur="checkUsername()">-->
                        <input name="username" type="text" id="username" onblur="checkUsername()">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>

                </tr>

                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password" onblur="checkPassword()">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>


                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>

            </table>

            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>

    </div>
    <script>

        //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
        function checkUsername() {
            let reg = /^\w{6,12}$/;
            let usernameValue = document.getElementById("username").value;
            if (reg.test(usernameValue)) {
                document.getElementById("username_err").style.display = "none";
                return true;
            } else {
                document.getElementById("username_err").style.display = "block";
                return false;
            }

        }

        //2. 验证 密码是否符合规则:长度 6~12任意字符
        function checkPassword() {
            let reg = /^.{6,12}$/
            let passwordValue = document.getElementById("password").value;
            if (reg.test(passwordValue)) {
                document.getElementById("password_err").style.display = "none";
                return true;
            } else {
                document.getElementById("password_err").style.display = "block";
                return false;
            }
        }


        //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
        function checkTel() {
            let reg = /^1[3-9]\d{9}$/
            let telValue = document.getElementById("tel").value;
            if (reg.test(telValue)) {
                document.getElementById("tel_err").style.display = "none";
                return true;
            } else {
                document.getElementById("tel_err").style.display = "block";
                return false;
            }
        }

        //4. 表单是否可以提交
        document.getElementById("reg-form").onsubmit = function () {
            return checkUsername() && checkPassword() && checkTel();
   }

    </script>
</body>

</html>